<template>
	<div class="header-box" :class="{ isyardPage }" v-if="showhead">
		<div class="ht">
			<div class="tit">
				<!-- <img v-if="isyardPage" src="../../assets/xiaoyuan/2.png" alt="">	 -->
				<div class="yardname" v-if="isyardPage">{{ info?.courtyardName }}</div>
				<img v-else src="../../assets/2.png" alt="">
			</div>
			<div class="h-search" >
				<el-input
					v-model="input1"
					style="width: 240px"
					size="large"
					:prefix-icon="Search"
					readonly
					@click="to({url: '/sh'})"
				/>
				<el-button-group class="s-btn" v-if="!islogin">
					<el-button type="primary" :icon="Edit" @click="to({url:'/login'})">
						登录
					</el-button>
					<el-button type="primary" :icon="Share" @click="to({url:'/register'})">
						注册
					</el-button>
				</el-button-group>

		    <el-dropdown @command="handleCommand" v-else>
      <el-button class="e-0b" type="primary">
				{{ userinfo.name }}
        <el-icon class="el-icon--right"><UserFilled /></el-icon>
      </el-button>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="user">个人中心</el-dropdown-item>
						<el-dropdown-item command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</template>
    </el-dropdown>
				
			</div>
		</div>
		<div class="h-nav">
			<div class="nav-item" 
				:class="{ active: isActive(item)} "
				@click="to(item)" 
				v-for="item in datas.tabbar" 
				:key="item.name">
					{{ item.name }}
			</div>
		</div>
		<div class="yardbanner" v-if="isyardPage">
			<img src="../../assets/xiaoyuan/3.png" alt="">
		</div>
	</div>
</template>

<script setup>
	import { useStore } from 'vuex'//导入createStore构造函数
	import { useRouter } from 'vue-router'
	import {
		reactive,ref,computed, watch
	} from 'vue';
	import { Search } from '@element-plus/icons-vue'
	import { ArrowDown, UserFilled } from '@element-plus/icons-vue'
import { getIntroduceVo, getCourtyardById  } from '@/api/home';


	const input1 = ref('')
	const router = useRouter()

	const store = useStore();

	const islogin = computed(() => store?.state?.islogin)

	const userinfo = computed(() => store?.state?.userinfo)

  const id = computed(() => {
		return router?.currentRoute?.value?.query.yardId
	})

  const info = ref({})
	const getCourtyardById1 = async() => {
		if(!id.value) return
    const params = {
      courtyardId: id.value
    }
    const ret = await getCourtyardById(params)
		console.log('info', ret.data)
    info.value = ret?.data;
  }

	watch(id, (val) => {
		getCourtyardById1()
	})

	const handleCommand = (a) => {
  // eslint-disable-next-line no-alert
	console.log('-00a',a)
	if(a === 'logout') {
		store.dispatch('logout')
	} else if(a == 'user') {
		router.push('/uc')
	}
}

	const dataList = reactive({
		tabbar: [
			{
				name: '首页',
				url: '/home'
			},
			{
				name: '工作动态',
				url: '/job'
			},
			{
				name: '站院地图',
				url: '/map'
			},
			{
				name: '驻站专家',
				url: '/specialist'
			},
			{
				name: '农事问答',
				url: '/nsqa'
			},
			// {
			// 	name: '站院风采',
			// 	url: '/zyfc'
			// },
			{
				name: '通知公告',
				url: '/notic'
			},
			{
				name: '资源共享',
				url: '/zygx'
			},
		]
	})

	const datalist2 = reactive({
		tabbar: [
			{
				name: '站院首页',
				url: '/yardhome'
			},
			{
				name: '站院介绍',
				url: '/yardintro'
			},
			{
				name: '站院动态',
				url: '/yardnews'
			},
			{
				name: '驻站专家',
				url: '/yardspecialist'
			},
			{
				name: '农事问答',
				url: '/yardnsqa'
			},
			{
				name: '通知公告',
				url: '/yardnotic'
			},
			{
				name: '站院科普',
				url: '/yardkepu'
			},
		]
	})


	const to = (item) => {
		console.log(item, router)
		if(id.value && item.url.includes('yard')) {
			router.push(item.url+'?yardId='+id.value)
		} else {
		router.push(item.url)
		}
	}
	const rootName = computed(()=> {
		return router.currentRoute.value.path
	})
	const isActive = (item) => {
		console.log(rootName?.value, item.url)
		return rootName?.value.includes(item.url)
	}

	const isyardPage = computed(()=> {
		return router.currentRoute.value?.meta?.id == 3
	})

	const datas = computed(() => {
		return isyardPage?.value ? datalist2 : dataList
	})

	const showhead = computed(() => {
		return router.currentRoute.value?.meta?.id !== -1
	})

	
</script>

<style lang="scss" scoped>


.header-box {
	width: 100%;
	height: 260px;
	display: flex;
	flex-direction: column;
	&.isyardPage {
		height: auto;
	}
	
	.yardname {
		font-size: 70PX;
		// text-shadow: #fff 2px 5px 5px, #fff -5px 5px 5px;
		letter-spacing: 5px;
		font-weight: 900;
		font-family: 'MyCustomFont';
		text-shadow:
    -5px -5px 0 #fff,
    5px -5px 0 #fff,
    -5px 5px 0 #fff,
    5px 5px 0 #fff; /* 使用阴影来模拟着焦效果 */
		
	}
	.ht {
		height: 180px;
		background: url('../../assets/1.png') no-repeat center center / 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10%;
		.tit {
			font-size: 48px;
			font-weight: 900;
			color: #068043;
			display: flex;
			align-items: center;
			max-width: 50%;
			img {
				width: 100%;
				object-fit: contain;
			}
			.tit-text {
				text-shadow: 5px 5px 2px #fff;
			}
			.tit-hn {
				width: 115px;
				height: 50px;
				background-color: #068043;
				color: #fff;
				border-radius: 20px;
				font-size: 38px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				margin-left: 10px;
			}
		}
		.h-search {
			display: flex;
			align-items: center;
			width: 550px;
			justify-content: flex-end;
			::v-deep .el-input {
				width: 60% !important;
				.el-input__wrapper {
					border-radius: 12px;
					height: 45px;
				}
				.el-input__inner {
					cursor: pointer;
				}
				.el-icon {
					color: #068043;
					font-size: 20px;
				}
			}
			.s-btn {
				margin-left: 18px;
				.el-button {
					height: 45px;
					padding: 0 20px;
					font-size: 16px;
					font-weight: normal;
					&:first-child {
						border-radius: 8px 0 0 8px !important;
					}
					&:last-child {
						border-radius: 0 8px 8px 0 !important;
					}
				}
			}
		}
		.e-0b {
			margin-left: 20px;
		}
	}
	.h-nav {
		height: 80px;
		width: 100%;
		background-color: #068043;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding: 0 10%;
		flex-shrink: 0;
		.nav-item {
			font-size: 26px;
			color: #fff;
			cursor: pointer;
			&.active {
				color: #4af8a1;
				border-bottom: 2px solid #4af8a1;
				padding-bottom: 5px;
			}
		}
	}
	.yardbanner {
		height: 280px;
		width: 100%;
		overflow: hidden;
		img {
			height: 100%;
			width: 100%;
		}
	}
}
</style>